<template>
    <div class="login-page">
        <img src="./assets/images/titleR.png" alt="">
        <div class="login-title">
            HelLo!
            <br>
            {{ activityInfo.name }}
            <br>
            活动报名
            <br>
            <div style="line-height: 20px;">
                <font>
                    活动时间：{{ activityInfo.startTime }}~{{ activityInfo.endTime }}
                    <br>
                    活动地址：{{ activityInfo.address }}
                </font>
                <br>
                <font style="color: red;font-size: 14px;">
                    报名截止时间：{{ activityInfo.signupEndTime }}
                </font>                
            </div>
        </div>
        <div class="login-container">
            <van-overlay :show="loading"></van-overlay>
            <p>队伍名称</p>
            <van-field
            v-model="formData.companyName"
            placeholder="请输入队伍名称"
            />
            <p>参与队长</p>
            <van-field
            v-model="formData.attackUser"
            placeholder="请输入队长姓名"
            />
            <p>队长手机号</p>
            <van-field
            v-model="formData.attackPhone"
            placeholder="请输入队长手机号"
            />
            <!-- <p>登录密码</p>
            <van-field
            v-model="formData.password"
            placeholder="请输入登录密码"
            /> -->
            <p>队长身份证</p>
            <van-field
            v-model="formData.attackUserIdCard"
            placeholder="请输入队长身份证"
            />
            <p>队长性别</p>
            <van-radio-group v-model="formData.attackSex" direction="horizontal">
                <van-radio name="1">男</van-radio>
                <van-radio name="2">女</van-radio>
            </van-radio-group>
            <p>是否住宿</p>
            <van-radio-group v-model="formData.attackStay" direction="horizontal">
                <van-radio name="1">是</van-radio>
                <van-radio name="2">否</van-radio>
            </van-radio-group>
            <div class="login-forgot" @click="addUserList">
                添加成员
            </div>
            <div v-for="(item, index) in formData.attackUserList">
                <p>参与队员{{ index + 1 }}</p>
                <van-field
                v-model="item.name"
                placeholder="请输入队员姓名"
                />
                <p>队员{{ index + 1 }}手机号</p>
                <van-field
                v-model="item.phone"
                placeholder="请输入队员手机号"
                />
                <!-- <p>队员{{ index + 1 }}密码</p>
                <van-field
                v-model="item.password"
                placeholder="请输入密码"
                /> -->
                <p>队员{{ index + 1 }}身份证</p>
                <van-field
                v-model="item.attackUserIdCard"
                placeholder="请输入队员身份证"
                />
                <p>队员{{ index + 1 }}性别</p>
                <van-radio-group v-model="item.attackSex" direction="horizontal">
                    <van-radio name="1">男</van-radio>
                    <van-radio name="2">女</van-radio>
                </van-radio-group>
                <p>是否住宿</p>
                <van-radio-group v-model="item.attackStay" direction="horizontal">
                    <van-radio name="1">是</van-radio>
                    <van-radio name="2">否</van-radio>
                </van-radio-group>
                <div class="login-forgot" style="color: red;" @click="formData.attackUserList.splice(index, 1)">
                    删除成员
                </div>
            </div>
            <div class="login-btn" @click="doSubmitTest">
                立即报名
            </div>

            <van-popup
            v-model:show="showPicker"
            position="bottom">
                <van-picker
                :columns="columns"
                @confirm="onConfirm"
                @cancel="showPicker = false"></van-picker>
            </van-popup>
            <div class="login-accord">
                我已阅读并同意的
                <font style="color: #2878FF;">《用户协议》</font>
                与
                <font style="color: #2878FF;">《隐私政策》</font> 
            </div>
        </div>
    </div>
</template>
<script setup>
import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import { Field as VanField, showToast, showSuccessToast, Icon as VanIcon, Popup as VanPopup, Picker as VanPicker, Overlay as VanOverlay, RadioGroup as VanRadioGroup, Radio as VanRadio } from 'vant'
import { useRoute, useRouter } from 'vue-router'
import md5 from 'js-md5'

const router = useRouter();
const formData = ref({
    companyName: "",
    companyType: "",
    attackUser: "",
    attackPhone: "",
    attackUserIdCard: "",
    attackSex: "1",
    attackStay: "1",
    attackUserList: []
});
const route = useRoute();
const showPicker = ref(false);
const loading = ref(false);
const columns = ref([
    {value:'48',text:'党委机关'},
    {value:'50',text:'事业单位'},
    {value:'51',text:'电子政务'},
    {value:'52',text:'政府机关'},
    {value:'53',text:'大型国企'},
    {value:'54',text:'其他单位'}
]);
const activityList = ref([]);
const activityInfo = ref({});

onMounted(() => {
    // axios.post("/activity/selectList", { id: route.query.id }).then(res => {})
    axios.post("/whiteApi/selectList", {id: route.query.id}).then(res => {
        activityInfo.value = res.data[0]
        if(activityInfo.value.isStart != 0 || activityInfo.value.signupStatus == 2) {
            alert("报名已结束！")
            router.go(-1)
        }
    })
})

function validateIdCard(idCard) {
  const idCardRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  return idCardRegex.test(idCard)
};

function validatePassword(pwd) {
  // 定义四个正则条件
  const hasUpper = /[A-Z]/.test(pwd);
  const hasLower = /[a-z]/.test(pwd);
  const hasNumber = /\d/.test(pwd);
  const hasSpecial = /[!@#$%^&*()_+\-=$$$${};':"\\|,.<>\/?]/.test(pwd);
  
  // 计算满足条件的数量
  const conditionsMet = [hasUpper, hasLower, hasNumber, hasSpecial]
    .filter(Boolean).length;

  return pwd.length >= 8 && conditionsMet >= 3;
};

function onConfirm(val) {
    formData.value.companyType = val.selectedOptions[0].value
    formData.value.companyTypeName = val.selectedOptions[0].text
    showPicker.value = false
}

function addUserList() {
    formData.value.attackUserList.push({
        name: "",
        phone: "",
        // password: "",
        attackUserIdCard: "",
        attackSex: "1",
        attackStay: "1"
    })
}

function doSubmitTest() {
    if (!formData.value.companyName) {
        return showToast("请输入队伍名称！");
    }
    // if (!formData.value.companyType) {
    //     return showToast("请选择企业类型！");
    // }
    if (!formData.value.attackUser) {
        return showToast("请输入队长姓名！");
    }
    if (!formData.value.attackPhone) {
        return showToast("请输入队长手机号！");
    }
    // if (!formData.value.password) {
    //     return showToast("请输入密码！");
    // }
    // if(!validatePassword(formData.value.password)) {
    //     return showToast("密码需满足：至少8位，且包含大写字母、小写字母、数字、特殊字符中至少3种!");
    // }
    if(!validateIdCard(formData.value.attackUserIdCard)) {
        return showToast("请输入正确的身份证！");
    }
    let num = 0
    let pwd = 0
    formData.value.attackUserList.forEach((item,index) => {
        // if(!validatePassword(item.password)) {
        //     pwd ++
        // }
        if(!validateIdCard(item.attackUserIdCard)) {
            num ++
        }
    })
    if(num) {
        return showToast("请输入正确的身份证！");
    }
    // if(pwd) {
    //     return showToast("队员密码需满足：至少8位，且包含大写字母、小写字母、数字、特殊字符中至少3种!");
    // }
    formData.value.activityId = route.query.id
    loading.value = true
    let obj = JSON.parse(JSON.stringify(formData.value))
    // obj.password = md5(obj.password)
    // obj.attackUserList.forEach(item => {
    //     item.password = md5(item.password)
    // })
    axios.post("/whiteApi/save", obj).then(res => {
        loading.value = false
        if(res.code == 200) {
            showSuccessToast(res.data)
        }
    }, err => {
        loading.value = false
    })
}

</script>
<style scoped lang="less">
.login-page {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #E4F6FE;
  img {
    position: absolute;
    right: 0;
    top: 45px;
    height: 36vh;
  }
  .login-title {
    font-weight: 500;
    font-size: 2rem;
    color: #42A9E4;
    padding: 18.1% 0 9.9% 7.5%;
    font {
        font-size: 12px;
    }
  }
  .login-container {
    background-color: #ffffff;
    border-radius: 44px 44px 0 0;
    box-shadow: 1px -13px 35px 8px rgba(5,46,92,0.17);
    width: 100%;
    min-height: 65vh;
    position: relative;
    z-index: 3;
    padding: 86px 40px 50px;
    p {
      margin: 0;
      padding: 5px 16px;
      font-size: 18px;
      font-weight: 500;
      color: #333333;
    }
    .van-cell:last-child:after, .van-cell--borderless:after {
      display: block;
    }
    .van-radio-group--horizontal {
        margin: 0px 16px;
        padding: 10px 0;
        border-bottom: 0.5px solid #ebedf0;
    }
    .login-forgot {
      text-align: right;
      font-weight: 500;
      font-size: 15px;
      color: #2878FF;
      padding: 10px 16px 0;
      display: flex;
      justify-content: flex-end;
    }
    .login-btn {
      height: 45px;
      background: #2878FF;
      border-radius: 22px;
      font-weight: 500;
      font-size: 17px;
      color: #FAFAFA;
      text-align: center;
      margin-top: 23px;
      padding-top: 10px;
    }
    .pass {
      background-color: #AEB1B7;
      margin-top: 12px;
    }
    .login-accord {
      font-weight: 500;
      font-size: 13px;
      color: #999999;
      text-align: center;
      margin-top: 43px;
    }
  }
}
</style>
  